<template>
    <div class="todo-wrap">
        <header>
            全选:<input type="checkbox" :checked="checkAll" @change="toggleAll(!checkAll)"/>
            <h2>输入待办事项：</h2>  
            <input type="text" @keyup.enter="addTodo">
        </header>
        <div class="con">
            <h2>待办事项列表：</h2>
            <ul>
                <todo-item v-for="(item,i) in filterTodos" :key="i"
                    :todo="item"
                >{{item.text}}</todo-item>
            </ul>
        </div>
        <footer>
            待办事项个数：
            <div>
                <span @click="visibility=key" v-for="(item,key,i) in filters" :key="i">{{key}}</span>
            </div>
            <button @click="">clear</button>
        </footer>
    </div>
</template>
<script>
import todoItem from '../components/todoItem'
import {mapActions} from 'vuex'
export default {
    data(){
        return {
            visibility:'all',
            filters:{
                'all':todos => todos,
                'complated':todos => todos.filter(item => item.done),
                'notDone':todos => todos.filter(item => !item.done)            }
        }
    },
    components:{
       todoItem
    },
    computed:{
       todos(){
           return this.$store.state.todos
       },
       checkAll(){
           return this.todos.length && this.todos.every(item => item.done)
       },
       filterTodos(){
           return this.filters[this.visibility](this.todos)
       }
    },
    methods:{
        addTodo(e){
            let val = e.target.value.trim();
            this.$store.dispatch('addTodo',val);
            e.target.value="";
        },
        ...mapActions(['toggleAll'])
    }
}
</script>
